<template>
    <div>
        <HeaderTop title="我的">
        </HeaderTop>

        <div class="mui-card">
            <div class="mui-card-header">
                <div>
                    <a id="icon-icon-contact">
                        <span class="mui-icon mui-icon-contact"></span>
                    </a>
                    <router-link to="/login">登录/注册</router-link>
                </div>
                页眉
                <span class="mui-icon mui-icon-arrowright"></span>
            </div>
              <div class="goodscount">
                  <span>0.00元</span>
                  <span>0个</span>
                  <span>0分</span>
              </div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <ul class="mui-table-view mui-table-view-chevron">
                        <li class="mui-table-view-cell mui-media">
                            <a class="mui-navigate-right">
                                <img class="mui-media-object mui-pull-left" src="/images/cat1.jpg">
                                <div class="mui-media-body">
                                    CBD
                                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
                                </div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                            <a class="mui-navigate-right" href="javascript:;">
                                <img class="mui-media-object mui-pull-left" src="/images/cat1.jpg">
                                <div class="mui-media-body">
                                    远眺
                                    <p class="mui-ellipsis">静静的看这个世界，最后终于疯了</p>
                                </div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                            <a class="mui-navigate-right">
                                <img class="mui-media-object mui-pull-left" src="/images/cat1.jpg">
                                <div class="mui-media-body">
                                    幸福
                                    <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                                </div>
                            </a>
                        </li>
                    </ul>

                </div>
            </div>
            <section class="profile_order">
                <mt-button type="danger" size="large" @click="logout">退出登录</mt-button>
            </section>
        </div>
    </div>
</template>

<script>
    import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
    import { MessageBox } from 'mint-ui'
    export default {
        name: "Profile",
        methods:{
            logout(){
                MessageBox.confirm('确认退出？').then(action=>{
                    //发送异步请求退出
                     this.$store.dispatch('logout')
                },
                    action=>{
                     console.log('点击取消')
                    })
            }
        },
        components:{
            HeaderTop
        },
    }
</script>

<style scoped lang="scss">
.goodscount{
    width: 100%;
    display: flex;
    justify-content: space-between;
    span{width:30%;height:50px;background-color: #0062cc}
}
</style>